
// 创建虚拟dom(转对象形式)

import { createElement, render, renderDom } from './virtual';
import domDiff from './domDiff';
import doPatch from './doPatch';

// createElement(标签名，自身属性，子元素)
const vDom1 = createElement('ul', {
  class: 'list',
  style: 'width: 300px; height: 300px; background-color: orange;'
}, [
  createElement('li', {
    class: 'item',
    'data-index': 0,
  }, [
    createElement('p', {
      class: 'text',
    }, [
      '第1个列表项'
    ])
  ]),
  createElement('li', {
    class: 'item',
    'data-index': 2,
  }, [
    '第3个列表项'
  ]),
  createElement('li', {
    class: 'item',
    'data-index': 1,
  }, [
    createElement('p', {
      class: 'text',
    }, [
      createElement('span', {
        class: 'title',
      }, [
        '第2个列表项'
      ])
    ])
  ]),
]);
const vDom2 = createElement('ul', {
  class: 'list-wrapper',
  style: 'width: 300px; height: 300px; color: #fff; background-color: #000;'
}, [
  createElement('li', {
    class: 'item',
    'data-index': 0
  }, [
    createElement('p', {
      class: 'title',
    }, [
      '特殊列表项'
    ])
  ]),
  createElement('div', {
    class: 'item',
    'data-index': 2
  }, [
    '第3个列表项'
  ]),
  createElement('li', {
    class: 'item',
    'data-index': 1
  }, [
    createElement('p', {
      class: 'text'
    }, [

    ])
  ])
]);

// 虚拟dom转为真实dom(realDom)
const rDom = render(vDom1);

// console.log(vDom1);
// console.log(rDom);

// 把真实Dom渲染到节点上 
renderDom(rDom,
  document.getElementById('app')
)

// 获取补丁包
const patches = domDiff(vDom1, vDom2);
// console.log(patches);

// 打补丁 (把比较出来的补丁 重新渲染到真实dom上)
doPatch(rDom, patches);
